<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title></title>
</head>

<body>
<table width="800" align="center" border="1" cellpadding="0" cellspacing="0">
    <tr>
        <th>序号</th>
        <th>商品分类</th>
        <th>商品名称</th>
        <th>删除</th>
        <th>编辑</th>

    </tr>
    <tr>
        <td colspan="5">
            <input type="checkbox"/>
        </td>

    </tr>

    <tr align="center">
        <td>1</td>
        <td>A</td>
        <td>B</td>
        <td>删除</td>
        <td>编辑</td>
    </tr>
    <tr align="center">
        <td>1</td>
        <td>A</td>
        <td>B</td>
        <td>删除</td>
        <td>编辑</td>
    </tr>
    <tr align="center">
        <td>1</td>
        <td>A</td>
        <td>B</td>
        <td>删除</td>
        <td>编辑</td>
    </tr>
    <tr align="center">
        <td>1</td>
        <td>A</td>
        <td>B</td>
        <td>删除</td>
        <td>编辑</td>
    </tr>
    <tr align="center">
        <td>1</td>
        <td>A</td>
        <td>B</td>
        <td>删除</td>
        <td>编辑</td>
    </tr>
    <tr align="center">
        <td>1</td>
        <td>A</td>
        <td>B</td>
        <td>删除</td>
        <td>编辑</td>
    </tr>


</table>
</body>

<style type="text/css">
    tr {
        height: 30px;
    }
</style>

<script type="text/javascript">
    /*
     * 表格隔行换色案例
     * 页面加载完成后执行
     * 实现思想 奇数行 偶数行
     * 获取表格所有行 标签名获取  改变标签对象的背景色 CSS修改 background-color
     *
     * 追加需求 鼠标放在行上,此行改变背景色	思想:事件鼠标悬浮 onmouserover 	JS中,实现元素绑定事件\
     *
     */
    window.onload = function () {
        //获取所有的表格
        var a = document.getElementsByTagName("tr");
        for (var i = 2; i < a.length; i++) {
            if (i % 2 == 0) {
                a[i].style.backgroundColor = "#12ABC3";
            } else {
                a[i].style.backgroundColor = "#D2FB03";
            }

            var color;
            //为遍历到的tr添加鼠标移入事件  事件发送,函数作为响应  .  新建变量记录原来背景色
            a[i].onmouseover = function () {
                //事件发送,调用匿名函数,循环已经结束,变量i已经死亡
                //this[i]是行标签,DOM是标签对象
                color = this.style.backgroundColor;
                this.style.backgroundColor = "#FF0000";
            }

            //为tr行添加鼠标离开事件
            a[i].onmouseout = function () {
                //本行的背景色还原
                this.style.backgroundColor = color;
            }
        }
    }
</script>

</html>